<template>
    <div class="storeDetail">
        <IHeader class="header" back="true" title="商品详情"></IHeader>
        <scroller  v-if="allData">
            <div class="Detail-header">
                <image :src="allData.topPicture ? allData.topPicture : imgPath('default_image.png')" class="headerImg"></image>
                <div class="datail-intro">
                    <div class="con1">
                        <div class="pri">
                            <text class="tit5">￥</text>
                            <text class="tit1">{{allData.discountPrice ? allData.discountPrice : allData.price}}/{{allData.priceUnit ? allData.priceUnit : ''}}</text>
                        </div>
                        <image :src="imgPath(allData.isCollection ? 'shou_true.png': 'shou_false.png')" class="xingxing" @click="keep"></image>
                    </div>
                    <div class="con1 con3">
                        <div class="pri">
                            <text class="tit2">原价￥</text>
                            <text class="tit2 tit3">{{allData.price}}/{{allData.priceUnit ? allData.priceUnit : ''}}</text>
                            <!--<text class="tit2">)</text>-->
                        </div>
                        <text class="shoucang" :class="[allData.isCollection? 'yellowColor': 'shoucang']">收藏</text>
                    </div>
                    <text class="con2">{{allData.goodsName}}</text>
                    <div class="con1">
                        <div class="pri monthsale">
                            <text class="tit4">月销：</text>
                            <text class="tit4">{{allData.sales ? allData.sales : 0}}</text>
                            <text class="tit4">笔</text>
                        </div>
                        <text class="tit4">{{allData.address}}</text>
                    </div>
                </div>
            </div>
            <div class="xian"></div>
            <div class="choose" @click="shoppingShow">
                <div class="choosetext" >
                    <text class="choose1">选择</text>
                    <text class="choose2" v-if="guige">规格分类选择</text>
                    <text class="choose2" v-if="guigeChoose">{{dingzhiTypeText}}{{goodTypeText}}</text>
                </div>
                <image class="turnRight" :src="imgPath('arrow_right_small.png')"></image>
            </div>
            <div class="xian"></div>
            <div class="detail" v-if="allData.parameter">
                <text class="title">商品详情</text>
                <div class="tabledetail">
                    <div class="tableitem" v-if="allData.parameter.breadth">
                        <text class="tabletit1 itm">幅宽</text>
                        <text class="tabletit2 itm">{{allData.parameter.breadth}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.color">
                        <text class="tabletit1 itm">颜色</text>
                        <text class="tabletit2 itm">{{colorText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.componentProportion">
                        <text class="tabletit1 itm">成分比例</text>
                        <text class="tabletit2 itm">{{allData.parameter.componentProportion}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.cupThickness">
                        <text class="tabletit1 itm">杯型厚度</text>
                        <text class="tabletit2 itm">{{beiXingText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.elasticDegree">
                        <text class="tabletit1 itm">弹力程度</text>
                        <text class="tabletit2 itm" >{{tanXingText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.flowerHigh">
                        <text class="tabletit1 itm">花高</text>
                        <text class="tabletit2 itm ">{{allData.parameter.flowerHigh}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.flowerSize">
                        <text class="tabletit1 itm">花型尺寸</text>
                        <text class="tabletit2 itm ">{{allData.parameter.flowerSize}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.glossiness">
                        <text class="tabletit1 itm">光泽度</text>
                        <text class="tabletit2 itm " >{{glossinessText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.material">
                        <text class="tabletit1 itm">材质</text>
                        <text class="tabletit2 itm ">{{caiZhiText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.pantoneNum">
                        <text class="tabletit1 itm">潘通色号</text>
                        <text class="tabletit2 itm ">{{allData.parameter.pantoneNum}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.wrapperMaterial">
                        <text class="tabletit1 itm">包装材质</text>
                        <text class="tabletit2 itm ">{{wrapperText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.patchMaterial">
                        <text class="tabletit1 itm">贴边材质</text>
                        <text class="tabletit2 itm ">{{allData.parameter.patchMaterial}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.productionProcess">
                        <text class="tabletit1 itm">生产工艺</text>
                        <text class="tabletit2 itm ">{{allData.parameter.productionProcess}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.rawYarn">
                        <text class="tabletit1 itm">原料纱织</text>
                        <text class="tabletit2 itm ">{{rawYarnText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.patchMaterial">
                        <text class="tabletit1 itm">贴布材质</text>
                        <text class="tabletit2 itm ">{{allData.parameter.patchMaterial}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.rubberContent">
                        <text class="tabletit1 itm">含胶量</text>
                        <text class="tabletit2 itm "> {{allData.parameter.rubberContent}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.size">
                        <text class="tabletit1 itm">规格尺寸</text>
                        <text class="tabletit2 itm "> {{allData.parameter.size}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.sliderProcess">
                        <text class="tabletit1 itm">拉头工艺</text>
                        <text class="tabletit2 itm ">{{allData.parameter.sliderProcess}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.thickness">
                        <text class="tabletit1 itm">厚度</text>
                        <text class="tabletit2 itm ">{{allData.parameter.thickness}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.specificationModel">
                        <text class="tabletit1 itm">规格型号</text>
                        <text class="tabletit2 itm ">{{allData.parameter.specificationModel}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.weaveProcess">
                        <text class="tabletit1 itm">编织工艺</text>
                        <text class="tabletit2 itm " v-if="allData.parameter.weaveProcess ==='1'" >经编</text>
                        <text class="tabletit2 itm " v-if="allData.parameter.weaveProcess ==='2'" >纬编</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.weight">
                        <text class="tabletit1 itm">克重</text>
                        <text class="tabletit2 itm " >{{allData.parameter.weight}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.width">
                        <text class="tabletit1 itm">宽度</text>
                        <text class="tabletit2 itm ">{{allData.parameter.width}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.widthClass">
                        <text class="tabletit1 itm">宽度分类</text>
                        <text class="tabletit2 itm " >{{widthClassText}}</text>
                    </div>
                    <div class="tableitem" v-if="allData.parameter.otherParam">
                        <text class="tabletit1 itm">其他参数</text>
                        <text class="tabletit2 itm " >{{allData.parameter.otherParam}}</text>
                    </div>
                    <div class="shuoming">
                        <text class="explain">描述信息</text>
                        <div class="smCon">
                            <text class="context">{{allData.describeInfo}}</text>
                        </div>
                    </div>
                    <div class="shuoming">
                        <text class="explain">特别说明</text>
                        <div class="smCon">
                            <text class="context">1、商品价格受原材料和市场趋势影响，最终成交价格以买卖双方确认后的价格为准；</text>
                            <text class="context">2、图片与实际颜色会有误差，以收到货物的实际颜色为准</text>
                            <text class="context">3、门幅和克重在指定范围内会有差异； </text>
                        </div>
                    </div>
                </div>
            </div>
            <div class="xian"></div>
            <div class="shop" v-if="allData.shops">
                <div class="shop-header">
                    <div class="store-imgwrap">
                        <image :src="allData.shops.headPicture" v-if="allData.shops.headPicture" class="store-img"></image>
                    </div>
                    <div class="shop-detail">
                        <text class="store-name">{{allData.shops.name}}</text>
                        <div class="person">
                            <div class="see">
                                <image :src="imgPath('follow.png')" class="seeImg"></image>
                                <text class="seeText">{{allData.shops.concernNumber ? allData.shops.concernNumber : 0}}</text>
                            </div>
                            <div class="see look">
                                <image :src="imgPath('swimsuit.png')" class="seeImg"></image>
                                <text class="seeText">{{allData.shops.goodsNumber ? allData.shops.goodsNumber : 0}}</text>
                            </div>
                        </div>
                    </div>
                    <text class="come-shop" @click="pushToShop(allData.shopsId)">进店</text>
                </div>
            </div>
            <div class="recommend" >
                <div class="retext" >
                    <text class="text1">为你推荐</text>
                </div>
            </div>
            <div class="recomImg" v-if="allData.shops">
                <div class="recomitem" v-for="(item, index) in allData.shops.goodsList" :key="index" @click="pushToStoreDetail(item.id)">
                    <image :src="item.topPicture" class="reImg"></image>
                    <div class="recom-detail">
                        <text class="introduce">{{item.goodsName}}</text>
                        <div class="money">
                            <text class="qian">￥</text>
                            <text class="qian">{{item.discountPrice ? item.discountPrice : item.price}}{{'/' + item.priceUnit}}</text>
                        </div>
                    </div>
                </div>
            </div>
            <div class="picIntro" v-if="allData.detailImgs">
                <div class="picheader">
                    <image :src="imgPath('default_image.png')" class="introImg"></image>
                    <text class="introtext">商品详情</text>
                </div>
                <image :src="item" class="imgWrapImg"  :key="index" v-for="(item, index) in imageObj"></image>
            </div>
            <div class="footer">
                <div class="footer-left">
                    <div class="contact-item" @click="callService">
                        <image :src="imgPath('concactgongyingshang.png')" class="contactImg"></image>
                        <text class="contact">联系供应商</text>
                    </div>
                    <div class="contact-item" @click="pushToShop(allData.shopsId)">
                        <image :src="imgPath('home1.png')" class="contactImg"></image>
                        <text class="contact">店铺</text>
                    </div>
                </div>
                <div class="footer-right">
                    <text class="add" @click="showCarShow(1)">加入购物车</text>
                    <text class="buy"  @click="showCarShow(2)">立即购买</text>
                </div>
            </div>
        </scroller>
        <div class="carModal" v-if="carShow" @touchend="stopEvent">
            <div class="carModalCon">
                <div class="topModal">
                <div class="leftModal">
                    <div><image :src="allData.topPicture" class="modalImg"></image></div>
                    <div class="infomodal">
                        <div class="con">
                            <div class="con ">
                                <text class="pri1 pri">￥</text>
                                <text class="pri1">{{allData.discountPrice ? allData.discountPrice : allData.price}}{{'/' + allData.priceUnit}}</text>
                            </div>
                            <div class="con">
                                <text class="pri2">库存：</text>
                                <text class="pri2" v-if="allData.inventory">{{allData.inventory}}</text>
                                <text class="pri2" v-if="!allData.inventory">0</text>
                            </div>
                        </div>
                        <div class="con">
                            <text class="pri2">商品编号：</text>
                            <text class="pri2">{{allData.goodsNo}}</text>
                        </div>
                    </div>
                </div>
                <div class="close">
                    <image :src="imgPath('close.png')" class="closeImg" @click="closeModal"></image>
                </div>
            </div>
                <div class="modalType">
                <div class="type">
                    <text class="typename">订购类型</text>
                    <div class="choose-item">
                        <WxcGridSelect  class="dztext"  :list="data2" :cols="3"  :single="true"  @select="onSelect($event)">
                        </WxcGridSelect>
                    </div>
                </div>
                    <div class="type">
                        <text class="typename">商品类型</text>
                        <div class="choose-item">
                            <WxcGridSelect class="dztext" :list="data3" :cols="3"  :single="true" @select="onSelect1($event)">
                            </WxcGridSelect>
                        </div>
                    </div>
                </div>
                <div class="modalInput">
                    <text class="shuliang">数量</text>
                    <div class="input">
                        <input type="text" class="ipt" placeholder="请输入购买数量" v-model="amount">
                        <!--<text class="ge">{{allData.priceUnit}}</text>-->
                    </div>
                </div>
                <div class="modal-footer" >
                    <text class="confirm-btn" @click="pushToWriteOrder">确认</text>
                </div>
            </div>
        </div>
        <WxcLoading :show="loadingShow" :need-mask="needMask"></WxcLoading>
        <Dialog :show="showDialog" @close="hideDialog">
            <text class="dialog-title">商店服务电话</text>
            <text class="phoneNumber" v-if="allData.shops">{{allData.shops.telephone ? allData.shops.telephone : '0595-82835151'}}</text>
            <div class="callPhone-wrapper flex_row">
                <text class="callPhone" @click="handleCall">拨打电话</text>
            </div>
        </Dialog>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import Dialog from '@/components/dialog'
import WxcGridSelect from '@/components/grid-select'
import { storeDetail, dinggouType, goodType, myCollect, cancelCollect } from '@/api/store'
import {getInfo} from '@/api/good'
import {addShopCar} from '@/api/order'
import Nat from 'natjs'
import { WxcLoading } from 'weex-ui'
const modal = weex.requireModule('modal')
const storage = weex.requireModule('storage')

export default {
  name: 'storeDetail',
  data () {
    return {
      data1: [ {'text': '为你推荐'}, {'text': '最新活动'} ],
      userId: '',
      imageObj: [], // 图片数组
      carShow: false,
      goodsId: '',
      allData: {},
      dinggouList: [],
      number: 1,
      data2: [],
      data3: [],
      carType: '',
      dingzhiTypeText: '',
      goodTypeText: '',
      display: true,
      shoucang: true,
      guige: true,
      dingzhiType: 1,
      goodType: 1,
      amount: 1,
      colorText: '',
      guigeChoose: false,
      beiXingText: '', // 杯型厚度
      tanXingText: '', // 弹性
      caiZhiText: '', // 辅料材质
      rawYarnText: '', // 原料纱织
      glossinessText: '', // 光泽度
      wrapperText: '', // 包装材料
      bianzhiText: '', // 编织
      widthClassText: '', // 宽度分类
      showDialog: false, // 显示对话框
      needMask: true, // 显示蒙版
      loadingShow: false // loading
    }
  },
  methods: {
    showCarShow (type) {
      const that = this
      that.carType = type
      if (that.carType === 2) {
        if (that.guigeChoose) {
          that.carShow = false
          let params = [{
            shopName: that.allData.shops.name,
            shopId: that.allData.shopsId,
            goods: [{
              amount: that.amount,
              buyType: that.dingzhiType,
              goodsType: that.goodType,
              goodsUrl: that.allData.topPicture,
              goodsName: that.allData.goodsName,
              price: that.allData.price,
              discountPrice: that.allData.discountPrice,
              id: that.allData.id
            }]
          }]
          if (that.amount < 0 || that.amount === '') {
            modal.toast({
              message: '请输入需要购买的数量'
            })
          }
          if (that.dingzhiTypeText && that.goodTypeText && that.amount > 0) {
            that.$router.push({path: '/mine/writeOrder', query: {paramsList: params, totalMoney: that.allMoney}})
          }
        } else {
          that.carShow = true
        }
      } else {
        if (that.guigeChoose) {
          that.carShow = false
          let params = {
            shopId: that.allData.shopsId,
            shopName: that.allData.shops.name,
            goods: {
              goodsId: that.allData.id,
              buyType: that.dingzhiType,
              goodsType: that.goodType,
              price: that.allData.price,
              discountPrice: that.allData.discountPrice,
              amount: that.amount,
              goodsName: that.allData.goodsName,
              goodsUrl: that.allData.topPicture
            }
          }
          that.$api.post(addShopCar, params, function (res) {
            if (that.dingzhiTypeText && that.goodTypeText && that.amount > 0 && that.amount < that.allData.inventory) {
              that.$router.push('/store/shoppingCar')
            }
          }, function () {}, true)
        } else {
          that.carShow = true
        }
      }
    },
    stopEvent (e) {
      const { platform } = weex.config.env
      platform === 'Web' && e.preventDefault && e.preventDefault()
    },
    closeModal () {
      this.carShow = false
    },
    pushToWriteOrder () {
      const that = this
      that.carShow = false
      if (that.carType === 2) {
        if (!that.guigeChoose) {
          that.carShow = true
          let params = [{
            shopName: that.allData.shops.name,
            shopId: that.allData.shopsId,
            goods: [{
              amount: that.amount,
              buyType: that.dingzhiType,
              goodsType: that.goodType,
              goodsUrl: that.allData.topPicture,
              goodsName: that.allData.goodsName,
              price: that.allData.price,
              discountPrice: that.allData.discountPrice,
              priceUnit: that.allData.priceUnit,
              id: that.allData.id
            }]
          }]
          if (that.dingzhiTypeText && that.goodTypeText && that.amount > 0) {
            that.$router.push({path: '/mine/writeOrder', query: {paramsList: params, totalMoney: that.allMoney}})
          }
        }
      } else {
        if (!that.guigeChoose) {
          that.carShow = true
          let params = {
            shopId: that.allData.shopsId,
            shopName: that.allData.shops.name,
            goods: {
              goodsId: that.allData.id,
              buyType: that.dingzhiType,
              goodsType: that.goodType,
              price: that.allData.price,
              priceUnit: that.allData.priceUnit,
              discountPrice: that.allData.discountPrice,
              amount: that.amount,
              goodsName: that.allData.goodsName,
              goodsUrl: that.allData.topPicture
            }
          }
          that.$api.post(addShopCar, params, function (res) {
            if (that.dingzhiTypeText && that.goodTypeText && that.amount > 0) {
              that.$router.push('/store/shoppingCar')
            }
          }, function () {}, true)
        } else {
          that.carShow = false
        }
      }
    },
    onSelect (res) {
      this.dingzhiType = res.checkedList[0].value
      this.dingzhiTypeText = res.checkedList[0].description
    },
    onSelect1 (res) {
      this.goodType = res.checkedList[0].value
      this.goodTypeText = res.checkedList[0].description
    },
    // 点击进行收藏
    keep () {
      const that = this
      let params = {
        goodsId: that.allData.id,
        shopId: that.allData.shopsId,
        type: 1
      }
      if (!that.allData.isCollection) {
        that.$api.post(myCollect, params, function (res) {
          modal.toast({
            message: '收藏成功'
          })
          that.allData.isCollection = true
        }, function () {}, true)
      } else {
        that.$api.post(cancelCollect, params, function (res) {
          modal.toast({
            message: '取消收藏'
          })
          that.allData.isCollection = false
        }, function () {}, true)
      }
    },
    shoppingShow () {
      const that = this
      that.carShow = true
      that.guige = false
      that.guigeChoose = true
    },
    // 联系客服
    callService () { // 联系客服
      this.showDialog = true
    },
    hideDialog () { // 关闭对话框
      this.showDialog = false
    },
    handleCall () { // 拨打电话
      const that = this
      let telephone = that.allData.shops.telephone ? that.allData.shops.telephone : '0595-82835151'
      Nat.call(telephone)
    },
    // 进入到店铺
    pushToShop (id) {
      const that = this
      that.$router.push({path: '/store/storeInfo', query: {shopsId: id}})
    },
    // 跳到当前页面
    pushToStoreDetail (id) {
      const that = this
      that.allData = {}
      let params = {}
      params.userId = that.userId ? that.userId : ''
      that.loadingShow = true
      that.$api.get(storeDetail + '/' + id, params, function (res) {
        that.loadingShow = false
        that.allData = res.data
      }, function () {
        that.loadingShow = false
      })
      // storage.getItem('userId', event => {
      //   if (event.result === 'success') {
      //     that.userId = event.data
      //     that.loadingShow = true
      //     let params = {}
      //     params.userId = that.userId ? that.userId : ''
      //     that.$api.get(storeDetail + '/' + id, params, function (res) {
      //       that.loadingShow = false
      //       that.allData = res.data
      //     }, function () {
      //       that.loadingShow = false
      //     })
      //   }
      // })
    },
    getGoodsDetail () { // 获取商品详情
      const that = this
      let params = {}
      params.userId = that.userId ? that.userId : ''
      that.loadingShow = true
      that.$api.get(storeDetail + '/' + that.$route.query.goodsId, params, function (res) {
        that.loadingShow = false
        that.allData = res.data
        // modal.toast({
        //   message: that.allData.detailImgs
        // })
        if (that.allData.detailImgs && that.allData.detailImgs.length > 0) {
          that.imageObj = that.imageObj.concat(that.allData.detailImgs.split(','))
        }
        // 获取颜色
        if (that.allData.color) {
          let colorparams = {
            value: that.allData.color,
            type: 'color'
          }
          that.$api.get(getInfo, colorparams, function (res) {
            that.colorText = res.data.description
          })
        }
        if (that.allData.parameter.cupThickness) {
          let beiXing = {
            value: that.allData.parameter.cupThickness,
            type: 'cup_thickness'
          }
          that.$api.get(getInfo, beiXing, function (res) {
            that.beiXingText = res.data.description
          })
        }
        if (that.allData.parameter.elasticDegree) {
          // 弹性
          let tanxing = {
            type: 'elastic_degree',
            value: that.allData.parameter.elasticDegree
          }
          that.$api.get(getInfo, tanxing, function (res) {
            that.tanXingText = res.data.description
          })
        }
        if (that.allData.parameter.weaveProcess) {
          let weavePro = {
            type: 'weave_process',
            value: that.allData.parameter.weaveProcess
          }
          that.$api.get(getInfo, weavePro, function (res) {
            that.bianzhiText = res.data.describtion
          })
        }
        if (that.allData.parameter.glossiness) {
          let glossiness = {
            type: 'glossiness',
            value: that.allData.parameter.glossiness
          }
          that.$api.get(getInfo, glossiness, function (res) {
            that.glossinessText = res.data.description
          })
        }
        if (that.allData.parameter.material) {
          // 材质
          let caizhi = {
            type: 'fabric_material',
            value: that.allData.parameter.material
          }
          that.$api.get(getInfo, caizhi, function (res) {
            that.caiZhiText = res.data.description
          })
        }
        if (that.allData.parameter.rawYarn) {
          let rawYarn = {
            type: 'fabric_raw_yarn',
            value: that.allData.parameter.rawYarn
          }
          that.$api.get(getInfo, rawYarn, function (res) {
            that.rawYarnText = res.data.description
          })
        }
        if (that.allData.parameter.widthClass) {
          let widthClass = {
            type: 'width_class',
            value: that.allData.parameter.widthClass
          }
          that.$api.get(getInfo, widthClass, function (res) {
            that.widthClassText = res.data.description
          })
        }
        if (that.allData.parameter.wrapperMaterial) {
          let wrap = {
            type: 'wrapper_material',
            value: that.allData.parameter.wrapperMaterial
          }
          that.$api.get(getInfo, wrap, function (res) {
            that.wrapperText = res.data.description
          })
        }
      }, function () {
        that.loadingShow = false
      })
    }
  },
  computed: {
    allMoney () {
      const that = this
      let price = that.allData.discountPrice ? that.allData.discountPrice : that.allData.price
      return price * that.amount
    }
  },
  mounted: function () {
    const that = this
    storage.getItem('userId', event => {
      if (event.result === 'success') {
        that.userId = event.data
      }
      that.getGoodsDetail()
    })
    that.$api.get(dinggouType, {}, function (res) {
      that.data2 = res.data
    })
    that.$api.get(goodType, {}, function (res) {
      that.data3 = res.data
    })
    // storage.getItem('userId', event => {
    //   if (event.result === 'success') {
    //     that.userId = event.data
    //     if (Number(that.userId) === that.allData.userId) {
    //       that.xianshi = false
    //     } else {
    //       that.xianshi = true
    //     }
    //   }
    //   modal.toast({
    //     message: JSON.stringify(that.xianshi)
    //   })
    // })
  },
  components: {
    IHeader,
    WxcGridSelect,
    Dialog,
    WxcLoading
  }
}
</script>

<style scoped>
    .modal-footer{
        height:98px;
        padding-top:10px;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color:  rgb(235,235,235);
    }
    .confirm-btn{
        width: 700px;
        height: 78px;
        background-color: rgb(43,48,64);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #fff;
        font-size: 24px;
        line-height:78px;
        text-align:center
    }
    .leftModal{
        flex-direction: row;
        align-items: flex-end;
    }
     .close{
        width: 31px;
        height: 31px;
        background-color: rgba(43,48,64,0.3);
        border-radius: 50%;
    }
    .closeImg{
        width: 31px;
        height: 31px;
    }
    .modalImg{
        width:200px;
        height:200px;
    }
    .infomodal{
        flex-direction: column;
        margin-left: 25px;
    }
    .con{
        flex-direction: row;
        margin-right: 15px;
        align-items: flex-end;
        margin-top: 15px;
    }
    .pri1{
        color:rgb(254,203,1);
        font-size:36px;
        font-weight:bold;
    }
    .pri2{
        color:rgb(134,134,134);
        font-size:24px;
    }
    .xian{
        width:750px;
        height:16px;
        background-color: rgb(245,245,245);
    }

    .datail-intro{
        padding-top:23px;
        padding-bottom:40px;
        padding-left:23px;
        padding-right:23px;
    }
    .datail-intro{
        flex-direction: column;
    }
    .con1{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .pri{
        font-size:28px;
        flex-direction: row;
        align-items: flex-end;
    }
    .tit5{
        font-size: 36px;
        color: rgb(254,203,1);
        font-weight:bold;
    }
    .tit1{
        font-size: 46px;
        color: rgb(254,203,1);
        font-weight: bold;
    }
    .tit2{
        font-size:24px;
        color:rgb(134,134,134);
    }
    .tit3{
        text-decoration: line-through;
        /*font-size:24px;*/
        /*color:rgb(70,70,70);*/
    }
    .con2{
        font-size:32px;
        color:rgb(70,70,70);
        font-weight:bold;
    }
    .tit4{
        font-size:24px;
        color:rgb(134,134,134)
    }
    .shoucang{
        font-size:24px;
       color:rgb(70,70,70)
    }
    .yellowColor {
        color:rgb(254,203,1);
    }
    .xingxing{
        width:40px;
        height:40px;
    }
    .con3{
        margin-top: 10px;
        margin-bottom: 34px;
    }
    .con2{
        margin-bottom:32px;
    }
    .choose{
        width: 750px;
        height: 88px;
        padding-left: 24px;
        padding-right:24px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .choosetext{
        flex-direction: row;
    }
    .choose1{
        color:rgb(134,134,134);
        font-size:28px;
    }
    .choose2{
        font-size:28px;
        color:rgb(70,70,70);
        margin-left: 38px;
    }
    .tabledetail{
        width: 702px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(235, 235, 235);
    }
    .title{
        font-size:32px;
        color:rgb(70,70,70);
        font-weight: bold;
        padding-top:28px;
        padding-bottom:28px;
    }
    .detail{
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
    }
    .tableitem{
        height: 70px;
        flex-direction: row;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(235,235,235);
    }
    .itm{
        width: 350px;
        height: 70px;
        text-align: center;
        line-height: 70px;
    }
    .tabletit1{
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color:  rgb(235,235,235);
        font-size: 28px;
        color: rgb(134,134,134);
    }
    .tabletit2{
        font-size: 28px;
        color:rgb(70,70,70);
        font-weight:bold;
    }
    .shuoming{
        padding-left: 38px;
        padding-top: 23px;
        padding-right: 38px;
        padding-bottom: 23px;
        flex-direction: column;
    }
    .smCon{
        flex-direction: row;
        flex-wrap: wrap;
    }
    .context{
        font-size:24px;
        width: 630px;
        color:rgb(134,134,134);
        line-height: 36px;
        flex-wrap: wrap;
    }
    .explain{
        font-size: 24px;
        color:rgb(70,70,70)
    }
    .shop-header{
        flex-direction: row;
        justify-content: space-between;
        padding-bottom:25px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgb(245,245,245);
    }
    .store-imgwrap{
        border-width: 1px;
        border-style: solid;
        border-color: rgb(245,245,245);
        width: 180px;
        height: 88px;
        border-radius: 10px;
    }
    .store-img{
        width:180px;
        height:88px;
        border-radius: 10px;
    }
    .shop-detail {
        width: 310px;
        flex-direction: column;
        margin-left: 24px;
    }
    .store-name{
        font-size:30px;
        color:rgb(134,134,134);
        lines:1;
        text-overflow: ellipsis;
    }
    .person{
        margin-top:15px;
        flex-direction: row;
    }
    .see{
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .seeImg{
        width:42px;
        height:42px;
        margin-right: 14px;
    }
    .seeText{
        font-size:24px;
        color:rgb(134,134,134);
    }
    .look{
        margin-left: 70px;
    }
    .come-shop{
        border-width: 1px ;
        border-style: solid;
        border-color: rgb(254,203,1);
        color: rgb(254,208,27);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        width:98px;
        height:36px;
        text-align:center;
        line-height:36px;
        font-size:26px;
        background-color: rgb(245,245,245);
    }
    .shop{
        padding-left:24px;
        padding-top:24px;
        padding-right:24px;
    }
    .recommend{
        padding-left: 16px;
        padding-right: 16px;
        flex-direction: row;
        height:90px;
    }
    .retext{
        width: 750px;
        height:90px;
        align-items: center;
        flex-direction: row;
        justify-content: center;
    }
    .text1{
        font-size:28px;
        padding-bottom: 10px;
        border-bottom-width: 2px;
        border-bottom-color: rgb(254,203,1);
        border-bottom-style: solid;
        color: rgb(254,203,1);
        width:120px;
    }
   .recomImg{
       padding-left:24px;
       padding-right:24px;
       padding-top:30px;
       padding-bottom:48px;
       flex-direction: row;
       margin-bottom:70px;
       /*justify-content: space-between;*/
   }
    .recomitem{
        width:230px;
        height:230px;
        /*background-color: red;*/
        margin-right: 8px;
    }
    .reImg{
        width: 230px;
        height: 230px;
        border-radius: 10px;
    }
    .recom-detail{
        position: absolute;
        bottom: 0;
        height: 75px;
        width: 230px;
        background-color: rgba(0,0,0,0.5);
        flex-direction:column;
        padding-left:8px;
        padding-right:8px;
        padding-top:2px;
    }
    .introduce{
       lines:1;
        font-size:26px;
        color:rgb(255,255,255);
        text-overflow: ellipsis;
    }
    .money{
      flex-direction: row;
        align-items: center;
    }
    .qian{
        font-size: 28px;
        color: rgb(254,203,1);
        font-weight:bold;
        margin-right:5px;
    }
    .recomitem{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .picheader{
        width: 750px;
        height:72px;
        background-color: rgb(235,235,235);
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .introImg{
        width:34px;
        height:24px;
        margin-right:16px;
    }
    .introtext{
        font-size:26px;
        color:rgb(206,206,206);
    }
    .imgWrapImg{
        width: 700px;
        margin-left: 25px;
        min-height: 750px;
    }
    .picIntro{
        margin-bottom: 130px;
    }
    .footer{
        width: 750px;
        position:fixed;
        bottom:0;
        height: 98px;
        flex-direction: row;
        background-color: #Fff;
        border-top-color: rgb(245,245,245);
        border-top-style: solid;
        border-top-width: 1px;
    }
    .footer-right{
        width: 460px;
        height: 98px;
        flex-direction: row;
    }
    .footer-left{
        flex-direction: row;
        justify-content: space-around;
        width:290px;
        height:98px;
    }
    .contact-item{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .contactImg{
        width:43px;
        height:43px;
        margin-bottom: 5px
    }
    .contact{
        font-size:24px;
        color:rgb(70,70,70);
    }
    .add{
        width:230px;
        height:98px;
        background-color: rgb(125,136,164);
        line-height:98px;
        text-align:center;
        font-size: 28px;
        color:rgb(255,255,255);
    }
    .buy{
        width:230px;
        height:98px;
        background-color: rgb(43,48,64);
        line-height:98px;
        text-align:center;
        font-size: 28px;
        color:rgb(255,255,255);
    }
    .carModal{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,0.66);
    }
    .carModalCon{
        padding-right: 25px;
        padding-left: 25px;
        padding-top: 25px;
        background-color: #fff;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        position: absolute;
        bottom: 0;
        width: 750px;
        border-bottom-color: rgb(245,245,245);
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }
    .topModal{
        padding-bottom: 20px;
        flex-direction: row;
        justify-content: space-between;
        border-bottom-color: rgb(245,245,245);
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }
    .modalType{
        padding-top: 8px;
        padding-bottom: 30px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color:rgb(235,235,235);
    }
    .type{
        flex-direction: column;
        background-color: #fff;
        margin-top: 30px;
    }
    .typename{
        font-size:24px;
        color:rgb(206,206,206);
        padding-left: 24px;
        padding-right: 24px;
    }
    .choose-item{
        flex-direction: row;
        margin-top:20px;
        width:700px;
        flex-wrap: wrap;
    }
    .dztext{
        padding-top:18px;
        font-size:24px;
        padding-bottom:18px;
        color:rgb(70,70,70);
        margin-right: 20px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-bottom: 15px;
    }
    .modalInput{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 88px;
    }
    .shuliang{
        font-size:24px;
        line-height:88px;
        color:rgb(134,134,134);
    }
    .input{
        flex-direction: row;
    }
    .ipt{
        border: none;
        width: 200px;
        font-size: 24px;
        text-align:right;
        padding-right: 10px;
    }
    .ge{
        line-height:88px;
        font-size:24px;
        color:rgb(70,70,70)
    }
    .monthsale{
        flex-direction: row;
        align-items: center;
    }
    .turnRight{
        width: 15px;
        height: 20px;
    }
    .grid-option{
        margin-right:20px !important
    }
    .headerImg{
        height: 750px;
        margin-top: 88px;
        width: 750px;
    }
    .dialog-title {
        font-size: 28px;
        text-align: center;
        color: #464646;
        font-family: medium;
    }
    .phoneNumber {
        margin-top: 60px;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
    }
    .callPhone-wrapper {
        margin-top: 50px;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
    }
    .callPhone {
        width: 278px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        border-radius: 8px;
        background-color: #2b3040;
    }
</style>
